<template>
  <div class="home-root">
    <div class="location-page main-layout">
      <!-- 搜索框在左，按钮在右 -->
      <div class="add-search-bar">
        <el-form action="" @submit.native="onSearch">
          <el-input v-model="searchText" placeholder="搜索国家" prefix-icon="el-icon-search" size="small"
            class="search-input">
          </el-input>
          <el-input v-model="selectedCity" placeholder="搜索城市" prefix-icon="el-icon-search" size="small"
            class="search-input">
          </el-input>
          <el-button icon="el-icon-search" type="primary" @click="onSearch" class="selectButton">搜索</el-button>
        </el-form>
        <div class="add-city-bar right-bar">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddCity"
            v-if="userRole === 'admin'">添加VPS</el-button>
        </div>
      </div>
      <div v-if="regionNamesCity.length > 0">
        <div class="vpsinfos-grid">
              <div class="flag-name-wrap custom-flag-info vpsinfos-item"
                v-for="city in regionNamesCity" :key="city.cityId"
                @click="openCityDialog(city)">
                <div class="city-info-list single-row vpsinfos-country-row">
                  <span class="info-value country">{{ city.townName }}</span>
                </div>
                <div class="city-info-list vpsinfos-detail-row align-detail-row">
                  <div class="detail-col">
                    <span class="info-label">IP：</span>
                    <span class="info-value">{{ city.ipAddress }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">端口：</span>
                    <span class="info-value">{{ city.portNum }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">起始日期：</span>
                    <span class="info-value">{{ formatDate(city?.createTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">截止日期：</span>
                    <span class="info-value">{{ formatDate(city?.endTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">服务：</span>
                    <span class="info-value">{{ city.serviceName }}</span>
                  </div>

                </div>
              </div>
            </div>
      </div>
      <div v-else>
        <el-tabs v-model="activeTab" class="location-tabs custom-tabs" tab-position="top" @tab-click="handleTabClick"
          :stretch="false">
          <el-tab-pane label="所有" name="all">
            <div class="location-grid all-city-grid">
              <template v-for="country in getUniqueCountries(allCities)">
                <div v-if="country.cities && country.cities.length > 0" :key="country.countryName"
                  class="location-item all-city-item custom-country-item"
                  @click="handleCountryClick(null, country, $event)">
                  <div class="flag-name-wrap custom-flag-info">
                    <img :src="`https://flagcdn.com/w320/${country.flagPath}.png`" alt="" class="flag" />
                    <div class="city-info-list single-row">
                      <span class="info-value">{{ country.countryName }}</span>
                    </div>
                  </div>
                </div>

              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane v-for="region in regionNames" :label="region.continentName" :name="String(region.continentId)"
            :key="region.continentId + '-' + regionNames.indexOf(region)">
            <template #label>
              <span style="position:relative;display:inline-block;cursor:pointer;"
                @click="handleTabClick({ name: String(region.continentId) })">
                {{ region.continentName }}
                <span
                  v-if="region.continentName === '亚洲' || region.continentName === '美洲' || (Array.isArray(region.vpsInfos) && region.vpsInfos.length > 0)"
                  class="tab-badge">{{ Array.isArray(region.vpsInfos) ? region.vpsInfos.length : 0 }}</span>
              </span>
            </template>
            <div class="location-grid all-city-grid">
              <template v-for="country in getCountries(region)">
                <div v-if="country.cities && country.cities.length > 0" :key="country.countryName"
                  class="location-item all-city-item custom-country-item" :class="{
                    selected: selectedCountry && selectedCountry.countryName === country.countryName,
                  }" @click="handleCountryClick(region, country, $event)">
                  <div class="flag-name-wrap custom-flag-info">
                    <img :src="`https://flagcdn.com/w320/${country.flagPath || region.flagPath}.png`" alt=""
                      class="flag" />
                    <div class="city-info-list single-row">
                      <span class="info-value">{{ country.countryName }}</span>
                    </div>
                  </div>
                </div>

              </template>
            </div>
          </el-tab-pane>
        </el-tabs>

        <PoentsIndex v-if="cityDialogVisible" :visible.sync="cityDialogVisible" :city="cityDialogInfo"
          :mode="cityDialogMode" :vpsInfos="cityDialogInfo?.vpsInfos || []" @success="handleCityForm" />
        <div class="all-vpsinfos-list location-page vpsinfos-list-layout same-width-list">
          <div v-if="edutuserList.length > 0">
            <!-- 选中国家的城市列表 -->

            <div class="vpsinfos-grid">
              <div class="flag-name-wrap custom-flag-info vpsinfos-item" v-for="city in edutuserList" :key="city.cityId"
                @click="openCityDialog(city)">
                <div class="city-info-list single-row vpsinfos-country-row">
                  <span class="info-value country">{{ city.cityName }}</span>
                </div>
                <div class="city-info-list vpsinfos-detail-row align-detail-row">
                  <div class="detail-col">
                    <span class="info-label">IP：</span>
                    <span class="info-value">{{ city.ipAddress }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">端口：</span>
                    <span class="info-value">{{ city.portNum }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">起始日期：</span>
                    <span class="info-value">{{ formatDate(city?.createTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">截止日期：</span>
                    <span class="info-value">{{ formatDate(city?.endTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">服务：</span>
                    <span class="info-value">{{ city.serviceName }}</span>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <!-- 未选择国家时显示默认列表 -->
            <div class="vpsinfos-grid">
              <div class="flag-name-wrap custom-flag-info vpsinfos-item"
                v-for="city in activeTab === 'all' ? allCities : getCurrentTabCities" :key="city.cityId"
                @click="openCityDialog(city)">
                <div class="city-info-list single-row vpsinfos-country-row">
                  <span class="info-value country">{{ city.cityName }}</span>
                </div>
                <div class="city-info-list vpsinfos-detail-row align-detail-row">
                  <div class="detail-col">
                    <span class="info-label">IP：</span>
                    <span class="info-value">{{ city.ipAddress }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">端口：</span>
                    <span class="info-value">{{ city.portNum }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">起始日期：</span>
                    <span class="info-value">{{ formatDate(city?.createTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">截止日期：</span>
                    <span class="info-value">{{ formatDate(city?.endTime) }}</span>
                  </div>
                  <div class="detail-col">
                    <span class="info-label">服务：</span>
                    <span class="info-value">{{ city.serviceName }}</span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 正确渲染所有vpsInfos的国家信息 -->

      <!-- 选中城市提示 -->

    </div>

  </div>
</template>

<script>
import {
  getVpsList, insertVpsList, updateVpsList, deleteVpsList, batchDeleteVpsList,
  conditionVpsList, cityNameVpsList
} from "@/api/vps/index.js";
import PoentsIndex from "@/views/poents/index.vue";
import { mapState } from "vuex";
export default {
  name: "SelectLocation",
  components: {
    PoentsIndex,
  },
  data() {
    return {
      activeTab: 'all', // 这里初始值就是 'all'
      selectedLocation: null,
      regionNames: [],
      locations: {},
      cityDialogVisible: false,
      cityDialogInfo: null,
      editCityId: null,
      deleteMode: false,
      selectedForDelete: [],
      id: "",
      searchText: "",
      portNum: "",
      nationName: "",
      edutuserList: [],
      selectedCountry: null,
      selectedCity: "",
      regionNamesCity: []
    };
  },
  computed: {
    ...mapState(["userRole"]),
    allCities() {
      // 汇总所有子城市
      return this.regionNames.reduce((arr, region) => {
        if (Array.isArray(region.vpsInfos)) {
          return arr.concat(region.vpsInfos);
        }
        return arr;
      }, []);
    },
    getCurrentTabCities() {
      // 当前tab对应的国家下的所有城市
      const region = this.regionNames.find(r => String(r.continentId) === this.activeTab);
      return region && Array.isArray(region.vpsInfos) ? region.vpsInfos : [];
    }
  },
  mounted() {
    // 渲染假数据到页面
    this.fetchVpsList();
    // 检查是否有edit页面返回的更新数据
    if (this.$route.query.updatedCity) {
      try {
        const updatedCity = JSON.parse(decodeURIComponent(this.$route.query.updatedCity));

        console.log(updatedCity, "编辑城市成功212");

        // 调用后端接口更新
        updateVpsList(updatedCity).then(res => {
          this.$message.success('编辑城市成功');
          this.fetchVpsList();
        }).catch(() => {
          this.$message.error('编辑城市失败');
        });
      } catch (e) {
        // ignore parse error
      }
      // 清除query参数，避免重复提交
      this.$router.replace({ path: this.$route.path, query: {} });
    }
    // 检查是否有edit页面传递的删除id
    if (this.$route.query.deleteId) {
      const id = this.$route.query.deleteId;
      // 调用后端接口删除
      deleteVpsList(id).then(res => {
        this.$message.success('删除成功');
        // 只刷新数据，不跳转页面
        this.fetchVpsList();
        // 清除query参数，避免重复提交
        this.$router.replace({ path: this.$route.path, query: {} });
      }).catch(() => {
        this.$message.error('删除失败');
        // 只清除query参数，不跳转
        this.$router.replace({ path: this.$route.path, query: {} });
      });
      // 不再在这里调用 this.$router.replace
    }
  },
  methods: {
    openCityDialog1(city) {
      // 跳转到edit页面并传递当前城市数据
      this.edutuserList = Array.isArray(city) ? city : [city];
      console.log(this.edutuserList, "2222222");
    },
    formatDate(value) {
      if (!value) return '';
      // 只保留日期部分（前10位：yyyy-MM-dd）
      return value.substring(0, 10);
    },
    handleTabClick(tab) {
      // tab.name 就是 continentId 或 'all'
      this.activeTab = tab.name;
      // 如果切换到“所有”tab，取消已选国家
      if (tab.name === 'all') {
        this.selectedCountry = null;
        this.edutuserList = [];
      }
    },
    handleCityClick(city) {
      this.selectedLocation = city;
      this.cityDialogInfo = city;

    },
    isEditing(city) {
      return this.editCityId === city.cityId;
    },

    async fetchVpsList() {
      try {
        const response = await getVpsList();
        // 兼容接口返回结构为 { data: [...] } 或直接为数组
        const regions = Array.isArray(response) ? response : response.data;
        this.regionNames = regions;
        console.log(this.regionNames, "获取城市数量成功");

        const locations = {};
        regions.forEach(region => {
          // 保证 locations 的 key 是字符串
          locations[String(region.continentId)] = region.cities || [];
        });
        // 组装所有城市的平铺数组
        locations['all'] = regions.reduce((all, region) => {
          if (Array.isArray(region.cities)) {
            return all.concat(region.cities);
          }
          return all;
        }, []);
        this.locations = locations;
      } catch (error) {
        console.error('Error fetching VPS list:', error);
      }
    },
    openCityDialog(city) {
      // 跳转到edit页面并传递当前城市数据
      this.$router.push({
        path: '/edit',
        query: { city: encodeURIComponent(JSON.stringify(city)) }
      });
    },
    handleAddCity() {
      // 弹出添加VPS对话框
      this.cityDialogInfo = null;
      this.cityDialogVisible = true;
      this.cityDialogMode = 'add';
    },
    toggleDeleteMode() {
      this.deleteMode = !this.deleteMode;
      if (!this.deleteMode) {
        this.selectedForDelete = [];
      }
    },
    toggleSelectDelete(id) {
      const idx = this.selectedForDelete.indexOf(id);
      if (idx === -1) {
        this.selectedForDelete.push(id);
      } else {
        this.selectedForDelete.splice(idx, 1);
      }
    },
    handleCityForm(form) {
      console.log(form, "城市表单数据");
      // 判断是否为编辑
      if (form._edit) {
        // 编辑模式，调用 updateVpsList
        updateVpsList(form).then(res => {
          console.log(res, "编辑城市成功123213");
          if (res.data == 0) {
            this.$message.error('编辑城市失败,没有该城市');
            return;
          }
          this.$message.success('编辑城市成功');
          this.cityDialogVisible = false;
          // 编辑后刷新数据
          this.fetchVpsList();
        }).catch(err => {
          this.$message.error('编辑城市失败');
          console.error(err);
        });
      } else {
        this.nationName = form.countryName;
        this.portNum = form.cityName;
        form.nationName = this.nationName;
        form.townName = this.portNum;

        // 添加模式，调用 insertVpsList
        insertVpsList(form).then(res => {
          console.log(res, "添加城市成功");
          this.cityDialogVisible = false;
          if (res.data == 1) {
            this.$message.success('添加城市成功');
            // 添加后刷新数据
            this.fetchVpsList();
          } else {
            this.$message.error('添加城市失败,没有该城市');
          }
        }).catch(err => {
          this.$message.error('添加城市失败');
          console.error(err);
        });
      }
    },

    regionLabelWithBadge(region) {
      // 角标更自然：小圆点+数字，贴近tab文字右上角，颜色柔和
      const count = Array.isArray(region.vpsInfos) ? region.vpsInfos.length : 0;
      if (
        region.continentName === '亚洲' ||
        region.continentName === '美洲' ||
        count > 0
      ) {
        return this.$createElement(
          'span',
          {
            style: 'position:relative;display:inline-block;'
          },
          [
            region.continentName,
            this.$createElement(
              'span',
              {
                class: 'tab-badge',
                style: `
                  display:inline-block;
                  min-width:18px;
                  height:18px;
                  line-height:18px;
                  background: #53caff;
                  color: #fff;
                  border-radius: 9px;
                  font-size:12px;
                  font-weight:600;
                  text-align:center;
                  position:absolute;
                  top:-8px;
                  right:-20px;
                  box-shadow:0 1px 6px #53caff33;
                  padding:0 5px;
                  z-index:1;
                `
              },
              count
            )
          ]
        );
      }
      return region.continentName;
    },
    onSearch() {
      // 可根据需要处理搜索逻辑，这里只做聚焦和触发过滤
      this.searchText = String(this.searchText.trim());
      this.selectedCity = String(this.selectedCity.trim());
      console.log(this.searchText, "搜索城市");
      if (!this.searchText && !this.selectedCity) {
        // 输入框为空时，渲染原本的数据
        this.fetchVpsList();
        return;
      }
      if (!this.searchText == "") {
        conditionVpsList(this.searchText, this.selectedCity).then(response => {
          const regions = Array.isArray(response) ? response : response.data;
          this.regionNames = regions;
          console.log(this.regionNames, "获取城市数量国家成功");
          this.$message.success('获取城市数量成功');
          this.cityDialogVisible = false;
        }).catch(err => {
          this.$message.error('获取城市数量失败');
          console.error(err);
        });
      } else {
        // 如果有搜索文本，调用后端接口进行过滤
        cityNameVpsList(this.selectedCity).then(response => {
          const regions =  Array.isArray(response?.data) ? response.data : (Array.isArray(response) ? response : []);
          this.regionNamesCity = regions;
          console.log(this.regionNamesCity, "获取城市数量成功");
          this.$message.success('获取城市数量成功');
          this.cityDialogVisible = false;
        }).catch(err => {
          this.$message.error('获取城市数量失败');
          console.error(err);
        });
      }
      // conditionVpsList(this.searchText, this.selectedCity).then(response => {
      //   const regions = Array.isArray(response) ? response : response.data;
      //   this.regionNames = regions;
      //   console.log(this.regionNames, "获取城市数量成功");
      //   this.$message.success('获取城市数量成功');
      //   this.cityDialogVisible = false;
      // 编辑后刷新数据
      // this.fetchVpsList();

    },
    getCountries(region) {
      // 提取唯一国家列表，每个国家包含其所有城市
      if (!region.vpsInfos || !Array.isArray(region.vpsInfos)) return [];
      const map = {};
      region.vpsInfos.forEach(city => {
        if (!map[city.countryName]) {
          map[city.countryName] = {
            countryName: city.countryName,
            flagPath: city.flagPath,
            regionId: region.continentId,
            cities: []
          };
        }
        map[city.countryName].cities.push(city);
      });
      return Object.values(map);
    },
    getUniqueCountries(cities) {
      const map = {};
      const seenCountries = new Set();

      cities.forEach(city => {
        if (!seenCountries.has(city.countryName)) {
          seenCountries.add(city.countryName);
          map[city.countryName] = {
            countryName: city.countryName,
            flagPath: city.flagPath,
            cities: cities.filter(c => c.countryName === city.countryName)
          };
        }
      });

      return Object.values(map);
    },
    handleCountryTabClick(region) {
      // 清除已选国家
      this.selectedCountry = null;
    },
    handleCountryClick(region, country, event) {
      event.stopPropagation();
      // 移除仅在"所有"tab响应的限制
      if (
        this.selectedCountry &&
        this.selectedCountry.countryName === country.countryName &&
        (this.selectedCountry.regionId === (region?.continentId || null))
      ) {
        // 取消选择
        this.selectedCountry = null;
        this.edutuserList = [];
      } else {
        // 选择国家并显示城市
        this.selectedCountry = {
          ...country,
          regionId: region?.continentId || null
        };
        this.edutuserList = Array.isArray(country.cities) ? country.cities : [];
      }
    },
  },
  watch: {
    searchText(newVal) {
      // 监听搜索框的变化
      if (newVal === '') {
        this.fetchVpsList();
      }
    },
    selectedCity(newVal) {
      // 监听城市搜索框的变化
      if (newVal === '') {
        this.regionNamesCity = [];
      }
    },
  },
};
</script>
<style scoped>
.location-page {
  max-width: 900px;
  margin: 30px auto;
  background: linear-gradient(135deg, #f3f6fa 0%, #e9f0fb 100%);
  border-radius: 16px;
  box-shadow: 0 4px 24px #b3c6e822;
  padding: 32px 28px 24px 28px;
  overflow: hidden;
  color: #232526;
}

.location-tabs {
  margin-bottom: 18px;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  justify-content: start;
}

/* 让只有一个城市卡片时靠左且宽度不拉满 */
.vpsinfos-grid > .vpsinfos-item:only-child {
  grid-column: 1 / 2;
  justify-self: start;
  max-width: 400px;
}

/* 保证卡片宽度正常 */
.vpsinfos-item {
  width: 100%;
  min-width: 260px;
  max-width: 400px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 18px;
  margin: 0;
  color: #232526;
  transition: all 0.3s ease;
  border: 1px solid #e6effd;
  cursor: pointer;
}

/* 调整国家卡片样式,增加间距 */
.custom-country-item {
  border-radius: 10px;
  background: linear-gradient(90deg, #f7fafd 60%, #e6f0fa 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid #e0eaff;
  margin-bottom: 4px;
  padding: 8px 12px;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.25s ease;
}

.custom-country-item .flag-name-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.custom-country-item .flag {
  width: 32px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
  margin-right: 10px;
  flex-shrink: 0;
}

.custom-country-item .city-info-list {
  margin: 0;
  flex: 1;
}

.custom-country-item .info-value {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.custom-country-item:hover {
  background: linear-gradient(90deg, #e9f0fb 60%, #b3c6e8 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  border-color: #409eff;
}

@media (max-width: 700px) {
  .city-info-list {
    grid-template-columns: 1fr;
  }
}

.info-label {
  color: #409eff;
  font-weight: 600;
  margin-right: 2px;
  min-width: 32px;
  display: inline-block;
}

.info-value {
  color: #232526;
  font-weight: 500;
  margin-right: 10px;
  min-width: 36px;
  max-width: 180px;
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  display: inline-block;
  word-break: break-all;
  /* 让内容对齐标签 */
  vertical-align: middle;
}

.flag {
  width: 60px;
  height: 35px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px #b3c6e822, 0 1px 6px #e9f0fb;
  background: #fff;
  transition: box-shadow 0.2s;
  flex-shrink: 0;
}

.country-name {
  font-size: 13px;
  font-weight: 600;
  color: #232526;
  letter-spacing: 1px;
  text-shadow: 0 1px 6px #e9f0fb, 0 2px 8px #b3c6e822;
  margin-top: 0;
  transition: color 0.2s, text-shadow 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-label {
  margin-left: auto;
  font-size: 12px;
  color: #409eff;
  background: #e9f0fb;
  border-radius: 7px;
  padding: 1px 8px;
  font-weight: 500;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 4px;
  transition: background 0.2s, color 0.2s;
  padding-right: 22px;
  position: relative;
}

.location-item.selected .country-label {
  background: #b3c6e8;
  color: #409eff;
}

.selected-tip-card {
  margin: 36px auto 0 auto;
  max-width: 340px;
  background: linear-gradient(90deg, #e9f0fb 0%, #b3c6e8 100%);
  border-radius: 14px;
  box-shadow: 0 2px 16px #b3c6e822;
  font-size: 19px;
  color: #409eff;
  text-align: center;
  letter-spacing: 1px;
  padding: 18px 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border: 1.5px solid #b3c6e8;
}

.selected-tip-card i {
  font-size: 22px;
  margin-right: 2px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.18s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.custom-tabs ::v-deep .el-tabs__nav {
  background: linear-gradient(90deg, #e9f0fb 0%, #b3c6e8 100%);
  border-radius: 12px;
  box-shadow: 0 2px 12px #b3c6e822;
  padding: 4px 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.custom-tabs ::v-deep .el-tabs__item {
  border-radius: 8px !important;
  margin: 0 6px;
  padding: 0 26px !important;
  font-weight: 600;
  font-size: 17px;
  color: #409eff;
  transition: background 0.2s, color 0.2s;
  height: 38px;
  line-height: 38px;
  background: transparent;
  position: relative;
}

.custom-tabs ::v-deep .el-tabs__item:hover {
  background: #e9f0fb;
  color: #409eff;
}

.custom-tabs ::v-deep .el-tabs__item.is-active {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px #409eff33;
}

.custom-tabs ::v-deep .el-tabs__active-bar {
  display: none;
}

.custom-tabs ::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

.add-search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 18px;
  justify-content: space-between;
}

.search-input {
  width: 200px;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border: 1.5px solid #b3c6e8 !important;
  color: #409eff !important;
  height: 32px;
}

.search-input ::v-deep .el-input__inner {
  background: #f8fafc !important;
  color: #409eff !important;
  border: none !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 15px;
}

.search-input ::v-deep .el-input__prefix {
  color: #409eff !important;
}

.search-input ::v-deep .el-input__icon {
  color: #409eff !important;
}

.right-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-city-bar .el-button {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%);
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 2px 8px #b3c6e822;
  transition: background 0.18s, box-shadow 0.18s;
  letter-spacing: 1px;
}

.add-city-bar .el-button:hover {
  background: linear-gradient(90deg, #53caff 60%, #409eff 100%);
  box-shadow: 0 4px 16px #53caff33;
  color: #fff;
}

.edit-input {
  width: 80px;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid #b3e0ff;
  border-radius: 5px;
  outline: none;
  margin-right: 4px;
  background: #f8fafc;
  color: #232526;
}

.edit-input:focus {
  border-color: #409eff;
  background: #fff;
}

.location-item.delete-selected {
  border: 2.5px solid #ff4d4f !important;
  box-shadow: 0 0 0 2px #ff4d4f55;
  background: linear-gradient(90deg, #ffeaea 60%, #fff6f6 100%);
}

.tab-badge {
  transition: background 0.2s, color 0.2s;
  background: #53caff;
  color: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  position: absolute;
  top: -8px;
  right: -20px;
  box-shadow: 0 1px 6px #53caff33;
  padding: 0 5px;
  z-index: 1;
}

.all-vpsinfos-list {
  margin: 24px auto 0 auto;
  padding: 25px 0 12px 0;
  max-width: 800px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px #b3c6e822;
}

.vpsinfos-list-layout {
  margin-top: 32px;
  padding: 32px 0 24px 0;
  background: #f8fafc;
  border-radius: 18px;
  box-shadow: 0 2px 12px #b3c6e822;
  max-width: 1100px;
  width: 100%;
}

.region-vpsinfos-block {
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed #e9f0fb;
}

.region-title {
  font-size: 20px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 16px;
  margin-left: 2px;
  letter-spacing: 1px;
}

.vpsinfos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  justify-content: start;
}

/* 让只有一个城市卡片时靠左且宽度不拉满 */
.vpsinfos-grid > .vpsinfos-item:only-child {
  grid-column: 1 / 2;
  justify-self: start;
  max-width: 400px;
}

/* 保证卡片宽度正常 */
.vpsinfos-item {
  width: 100%;
  min-width: 260px;
  max-width: 400px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 18px;
  margin: 0;
  color: #232526;
  transition: all 0.3s ease;
  border: 1px solid #e6effd;
  cursor: pointer;
}

.vpsinfos-country-row {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e6effd;
}

.vpsinfos-country-row .country {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.vpsinfos-detail-row.align-detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.vpsinfos-detail-row .detail-col {
  display: flex;
  align-items: center;
}

.vpsinfos-detail-row .info-label {
  width: 65px;
  color: #909399;
  font-size: 13px;
  text-align: right;
}

.vpsinfos-detail-row .info-value {
  flex: 1;
  color: #606266;
  font-size: 13px;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  background: linear-gradient(135deg, #f3f6fa 0%, #e9f0fb 100%);
  box-sizing: border-box;
}

.all-vpsinfos-list.same-width-list {
  max-width: 900px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* 保证和 .location-page 一致 */
}

/* 新增/修改样式：美化城市卡片和整体布局 */
.custom-location-item {
  border-radius: 22px;
  background: linear-gradient(90deg, #f0f7ff 60%, #e0eaff 100%);
  box-shadow: 0 4px 18px #b3c6e822, 0 2px 8px #e9f0fb;
  transition: box-shadow 0.22s, border 0.22s, background 0.22s, transform 0.18s;
  border: 2px solid #e0eaff;
  margin-bottom: 6px;
}

.custom-location-item:hover {
  background: linear-gradient(90deg, #e9f0fb 60%, #b3c6e8 100%);
  box-shadow: 0 8px 32px #b3c6e822, 0 2px 12px #e9f0fb;
  border-color: #53caff;
  transform: translateY(-3px) scale(1.03);
  z-index: 2;
}

.location-page.main-layout {
  background: linear-gradient(120deg, #f3f6fa 0%, #e9f0fb 100%);
  border-radius: 20px;
  box-shadow: 0 6px 32px #b3c6e822;
  padding: 38px 32px 28px 32px;
}

.all-vpsinfos-list.same-width-list {
  background: #fafdff;
  border-radius: 20px;
  box-shadow: 0 4px 18px #b3c6e822;
  padding: 36px 0 18px 0;
}

.vpsinfos-item {
  border-radius: 16px;
  background: linear-gradient(90deg, #fafdff 60%, #e9f0fb 100%);
  box-shadow: 0 2px 10px #b3c6e822;
  border: 1.5px solid #e0eaff;
  margin-bottom: 8px;
  transition: box-shadow 0.18s, background 0.18s, border 0.18s;
}

.vpsinfos-item:hover {
  background: linear-gradient(90deg, #e9f0fb 60%, #b3c6e8 100%);
  box-shadow: 0 8px 32px #b3c6e822, 0 2px 12px #e9f0fb;
  border-color: #53caff;
  transform: translateY(-2px) scale(1.02);
  z-index: 2;
}

/* 调整tab样式 */
.custom-tabs ::v-deep .el-tabs__nav {
  background: linear-gradient(90deg, #e9f0fb 0%, #b3c6e8 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px #b3c6e822;
  padding: 6px 12px;
  min-height: 52px;
}

.custom-tabs ::v-deep .el-tabs__item {
  border-radius: 10px !important;
  margin: 0 8px;
  padding: 0 30px !important;
  font-weight: 700;
  font-size: 18px;
  color: #409eff;
  height: 42px;
  line-height: 42px;
}

.custom-tabs ::v-deep .el-tabs__item.is-active {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px #409eff33;
}

/* 新增：非“所有”tab下国家卡片样式 */
.custom-country-item {
  border-radius: 10px;
  background: linear-gradient(90deg, #f7fafd 60%, #e6f0fa 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid #e0eaff;
  margin-bottom: 4px;
  padding: 8px 12px;
  min-height: 50px;
  /* 减小高度 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.25s ease;
}

.custom-country-item:hover {
  background: linear-gradient(90deg, #e9f0fb 60%, #b3c6e8 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  border-color: #409eff;
}

/* 响应式优化 */
@media (max-width: 900px) {

  .location-page.main-layout,
  .all-vpsinfos-list.same-width-list {
    padding: 16px 4px 12px 4px;
    border-radius: 10px;
  }

  .custom-location-item,
  .vpsinfos-item {
    min-width: 160px;
    padding: 10px 8px 10px 8px;
  }

  .custom-country-item {
    min-width: 120px;
    padding: 8px 6px 8px 6px;
  }
}

.country-title {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 20px;
  padding: 0 24px;
  border-left: 4px solid #409eff;
}

.home-root {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f3f6fa 0%, #e9f0fb 100%);
  padding: 0;
  box-sizing: border-box;
}
.global-search-bar {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 18px auto;
  display: flex;
  justify-content: center;
}
.main-content-flex {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
.country-list-panel {
  flex: 0 0 320px;
  min-width: 260px;
  max-width: 360px;
  background: #fafdff;
  border-radius: 16px;
  box-shadow: 0 2px 12px #b3c6e822;
  padding: 18px 10px 18px 10px;
  margin-bottom: 24px;
  height: fit-content;
}
.city-list-panel {
  flex: 1 1 0;
  min-width: 0;
  max-width: 900px;
  width: 100%;
}
@media (max-width: 1100px) {
  .main-content-flex {
    flex-direction: column;
    gap: 18px;
    max-width: 100vw;
    padding: 0 4px;
  }
  .country-list-panel,
  .city-list-panel {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 8px 2px;
  }
}
@media (max-width: 700px) {
  .main-content-flex {
    flex-direction: column;
    gap: 10px;
    padding: 0 2px;
  }
  .country-list-panel,
  .city-list-panel {
    padding: 2px 0;
  }
}
</style>